<template>
  <van-popup
    class="rewardProgress"
    v-model:show="props.show"
    position="center"
    :z-index="999999"
    teleport="body"
    close-on-popstate
    safe-area-inset-bottom
    :close-on-click-overlay="false"
    :style="{ width: '100vw' }"
    @click-overlay="closePopup"
    @click-close-icon="closePopup"
  >
    <!-- 内容 -->
    <div class="box">
      <!-- 信息 -->
      <div class="box-header items-center">
        <ImgNuxt
          class="box-header-left"
          :src="detail.avatar || file.avatarDefault"
          :placeholder="file.avatarDefault"
          isHttp
        ></ImgNuxt>
        <div class="box-header-right">
          <div class="box-header-sid">
            {{ `${detail.sid}`.substring(3, 100) }}
          </div>
          <!-- 进度和奖励 prizeStatus 任务状态 0:进行中 1:已完成 2:风控拒绝 -->
          <!-- bindEmailStatus 绑定邮箱状态 0:进行中 1:已完成 2:风控拒绝 -->
          <div
            v-if="detail.prizeStatus != 2 && detail.bindEmailStatus == 1"
            class="items-center"
          >
            <van-progress
              class="box-header-progress"
              :percentage="
                (Number(detail.finishCount) / Number(detail.totalCount)) * 100
              "
              stroke-width="8"
              track-color="#fff"
              color="#00E7B5"
              :show-pivot="false"
            />
            <div class="box-header-progress-text">
              {{ $t("inviteFriends.progress") }}
              {{
                toThousands(
                  decimalToLength(
                    (Number(detail.finishCount) / Number(detail.totalCount)) *
                      100,
                    0
                  )
                )
              }}%
            </div>
          </div>
          <!-- 无效邀请 -->
          <div
            v-else-if="detail.prizeStatus == 2"
            class="items-center box-header-desc"
          >
            {{ $t("inviteFriends.wxyq") }}
          </div>
          <!-- 邮箱未激活 -->
          <div
            v-else-if="detail.prizeStatus != 2 && detail.bindEmailStatus != 1"
            class="items-center box-header-desc"
          >
            {{ $t("inviteFriends.wbdsjwjh1") }}
          </div>
        </div>
      </div>
      <!-- 任务状态 -->
      <div class="box-task">
        <div
          v-for="(item, index) in detail.taskList"
          class="box-task-item items-center"
          :class="{
            'box-task-item-border': index != detail.taskList.length - 1,
          }"
        >
          <div class="box-task-item-left">
            <div class="box-task-item-name">
              {{ taskDetaeil(item.taskType).title }}
            </div>
            <div class="items-center">
              <div
                class="box-task-item-status"
                :class="{
                  'box-task-item-status-green': item.taskStatus == 1,
                  'box-task-item-status-blue': item.taskStatus == 0,
                  'box-task-item-status-grey':
                    item.taskStatus == 2 || item.taskStatus == 3,
                }"
              >
                {{ taskStatus(item.taskStatus) }}
              </div>
              <div v-if="item.finishTime" class="box-task-item-time">
                {{
                  useDateFormat(Number(item.finishTime), "YYYY-MM-DD HH:mm:ss")
                    .value
                }}
              </div>
            </div>
          </div>
          <div class="box-task-item-right">{{ item.prizeAmount }} BDC</div>
        </div>
      </div>
    </div>
    <!-- 关闭 -->
    <img
      class="close"
      src="/image/close-fff-icon.svg"
      @click.stop="closePopup"
    />
  </van-popup>
</template>
<script setup lang="ts" name="rewardProgress">
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import { toThousands, getOssFileUrl } from "@/utils";
import { useDateFormat } from "@vueuse/core";

const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    show: boolean;
    detail?: any; // 信息
  }>(),
  {
    show: false,
    detail: {},
  }
);

const emit = defineEmits(["update:show"]);

// 资源
const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});

/**
 * @description: 关闭弹窗
 */
const closePopup = () => {
  emit("update:show", false);
};

// 任务状态
const taskStatus = (type: number) => {
  // 0:进行中 1:已完成 2:风控拒绝 3:待发放
  if (type == 0) {
    return t("inviteFriends.jxz");
  } else if (type == 1) {
    return t("inviteFriends.ywc");
  } else if (type == 2) {
    return t("inviteFriends.wxjl");
  } else if (type == 3) {
    return t("inviteFriends.dff");
  } else {
    return {
      title: "--",
      desc: "--",
    };
  }
};

// 任务名称
const taskDetaeil = (type: number) => {
  // 2:注册并绑定手机 3:模拟平仓盈利 4:看直播 5:质押首充 6:好友成为大赢家
  if (type == 2) {
    return {
      title: t("inviteFriends.hyzc"),
      desc: t("inviteFriends.yqhyzcbsj"),
    };
  } else if (type == 3) {
    return {
      title: t("inviteFriends.hymnpcyl"),
      desc: t("inviteFriends.hymnpcylDesc"),
    };
  } else if (type == 4) {
    return {
      title: t("inviteFriends.hykzb"),
      desc: t("inviteFriends.hykzbDesc"),
    };
  } else if (type == 5) {
    return {
      title: t("inviteFriends.hywccz"),
      desc: t("inviteFriends.hywcczDesc"),
    };
  } else if (type == 6) {
    return {
      title: t("inviteFriends.hycwdyj"),
      desc: t("inviteFriends.hycwdyj") + "，" + t("inviteFriends.hycwdyjDesc"),
    };
  } else {
    return {
      title: "--",
      desc: "--",
    };
  }
};
</script>
<style lang="scss" scoped>
.rewardProgress {
  background-color: transparent !important;
  margin: 0;
  max-width: 100vw;
  overflow: initial;
}
.box {
  margin: 0 25 * 2px;
  padding: 15 * 2px;
  border-radius: 12 * 2px;
  overflow: hidden;
  background-color: #fff;
  &-header {
    padding: 8 * 2px 10 * 2px;
    border-radius: 6 * 2px;
    background: linear-gradient(90deg, #007bff 0.07%, #00b2ff 99.93%);
    &-left {
      width: 48 * 2px;
      height: 48 * 2px;
      border-radius: 100px;
      overflow: hidden;
    }
    &-right {
      flex: 1;
      width: 100%;
      margin-left: 10 * 2px;
    }
    &-sid {
      color: #fff;
      font-size: 14 * 2px;
      font-weight: 510;
      margin-bottom: 8 * 2px;
    }
    &-desc {
      color: #fff;
      font-size: 12 * 2px;
      font-weight: 400;
    }

    &-progress {
      flex: 1;
      &-text {
        margin-left: 12 * 2px;
        text-wrap: nowrap;
        white-space: nowrap;
        color: #fff;
        font-size: 12 * 2px;
        font-weight: 400;
      }
    }
  }
  &-task {
    padding: 10 * 2px;
    &-item {
      justify-content: space-between;

      &-border {
        padding-bottom: 12 * 2px;
        border-bottom: 0.7px solid rgba(115, 119, 128, 0.15);
        margin-bottom: 12 * 2px;
      }

      &-left {
        flex: 1;
      }
      &-right {
        text-wrap: nowrap;
        white-space: nowrap;
        margin-left: 10 * 2px;
        color: #007bff;
        font-size: 13 * 2px;
        font-weight: 510;
      }
      &-name {
        color: #141924;
        font-size: 13 * 2px;
        font-weight: 510;
        line-height: 18 * 2px;
        margin-bottom: 8 * 2px;
      }
      &-status {
        padding: 4 * 2px 6 * 2px;
        border-radius: 4 * 2px;
        text-wrap: nowrap;
        white-space: nowrap;
        font-size: 12 * 2px;
        font-weight: 400;
        margin-right: 4 * 2px;
        &-green {
          color: #00a660;
          background: #dcf5ea;
        }
        &-blue {
          color: #007bff;
          background: #e5f2ff;
        }
        &-grey {
          color: #999da7;
          background: #f0f3fa;
        }
      }
      &-time {
        color: #999da7;
        font-size: 12 * 2px;
        font-weight: 400;
      }
    }
  }
}
.close {
  position: absolute;
  z-index: 9;
  bottom: -50 * 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 30 * 2px;
  height: 30 * 2px;
}
</style>
